<template>
  <a-modal title="修改物流" width="750px" :maskClosable="false" :visible="dialog" :confirm-loading="loading" @ok="handleSave" @cancel="cancelForm">
    <div class="addpack">
      <div class="addpack-op">
        <div>物流公司：</div>
        <a-select labelInValue show-search :default-active-first-option="false" :filter-option="false" :not-found-content="null"
          @search="handleSearch" v-model="changeForm.logisticsCompany" placeholder="请选择物流公司编号" class="addpack-sele">
          <a-select-option v-for="item in selectDataNow" :key="item.key">{{item.label}}</a-select-option>
        </a-select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div>快递单号：</div>
        <a-input class="addpack-inp" v-model="changeForm.logisticsNo" placeholder="输入物流单号" />
      </div>
    </div>
  </a-modal>
</template>
<script>
import { postAction, getAction } from '@/api/manage'
export default {
  name: 'ChangeDeliverCal',
  data () {
    return {
      dialog: false,
      changeForm: {
        orderNo: '',
        logisticsCompany: {
          key: '',
          label: ''
        },
        logisticsNo: '',
      },
      selectData: [], // 物流公司
      selectDataNow: [],
      loading: false,
      columns: [
        {
          title: '商品',
          dataIndex: 'spuName',
          scopedSlots: { customRender: 'skuList' },
        },
        {
          title: '数量',
          dataIndex: 'num'
        }
      ]
    }
  },
  created () {

  },
  methods: {
    edit (record) {
      const self = this
      self.changeForm = {
        orderNo: record.id,
        logisticsCompany: {
          key: record.logisticsCompanyCode,
          label: ''
        },
        logisticsNo: record.logisticsNo,
      }
      this.dialog = true
      this.loadSelectData()
    },
    cancelForm () {
      this.dialog = false
    },
    handleSave () {
      const self = this
      if (!this.changeForm.logisticsCompany.key) {
        this.$message.warning('请选择物流公司！')
        return
      }
      if (!this.changeForm.logisticsNo) {
        this.$message.warning('请输入物流编号！')
        return
      }
      self.loading = true
      self.$confirm({
        title: '修改提醒',
        content: '确定要修改吗？',
        onOk () {
          postAction('/mallBase/omsOrderCalendar/updateDeliver', self.changeForm).then(res => {
            self.$emit('ok')
            self.loading = false
            self.dialog = false
          }).catch(_ => { self.loading = false })
        },
        onCancel () { },
      })

    },
    handleSearch (value) {
      this.selectDataNow = this.selectData.filter(function (item) {
        return value ? item.label.indexOf(value) != -1 : true
      })
    },
    loadSelectData () {
      const self = this
      getAction('/common/cmsLogisticsCompany/list', { pageSize: 2000 }).then(res => {
        self.selectData = res.result.records
        self.handleSearch("")
      })
    },
  },
}
</script>
<style lang="less">
.addpack {
  width: 100%;
  margin-bottom: 45px;
  .addpack-op {
    display: flex;
    align-items: center;
    margin-top: 5px;
    .addpack-sele {
      width: 150px;
    }
    .addpack-inp {
      width: 250px;
    }
  }
  .addimgBox {
    width: 100%;
    display: flex;
    align-items: center;
    .imgBox1 {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    .imgBox2 {
      flex: 1;
      .imgBox21 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 24px;
        width: 100%;
        line-height: 12px;
        font-size: 12px;
      }
      .imgBox22 {
        width: 100%;
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #999;
      }
    }
  }
}
</style>

